<template>
    <div class="main" id="app">
        <!-- 最左侧工具栏 -->
        <div class="tools">
            <!-- 用户Logo -->
            <div class="logo">
                <img :src="config.logo" alt="logo" />
            </div>

            <!-- 板块导航 -->
            <div
                v-for="(item, index) in routers"
                :class="['tools-btn', item.name, getActive(item.name)]"
                :title="item.meta.title"
                @click="toPage(item.path, item.name)"
            >
                <i :class="['iconfont', 'icon-' + item.name]"></i>
            </div>
        </div>
        <div class="page">
            <keep-alive>
                <!-- 这里是会被缓存的视图组件，比如 Home！ -->
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
        <div class="clearfix"></div>
    </div>
</template>

<script>
import Util from "common/util";
import { routers } from "page/router";
export default {
    name: "home",
    data() {
        return {
            // 配置信息
            config: window.config,
            // 页面路由表
            routers: routers,
            // 当前页面
            active: this.$route.name,
        };
    },
    watch: {
        $route(val) {
            this.active = val.name;
        },
    },
    mounted() {
        Util.setStorage("chat_kefu_uid", window.config.uid);
    },
    methods: {
        // 当前选择的节点
        getActive(name) {
            return name == this.active ? "active" : "";
        },
        // 页面跳转
        toPage(path, name) {
            if (name == this.active) {
                return;
            }
            this.$router.push(path);
        },
    },
};
</script>

<style>
#emoji {
    width: 320px;
    min-width: 320px;
    max-width: 640px;
    height: 146px;
    position: absolute;
    top: -152px;
    left: 2px;
    z-index: 999;
    border: 1px solid #eee;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    background: #fff;
    overflow-x: hidden;
    display: none;
}
.page {
    width: 804px;
    height: 100%;
    font-size: 0;
    float: left;
    font-size: 14px;
}
</style>